<template>
  <avue-crud :option="option" :data="data" @row-update="addUpdate" @row-save="rowSave" @row-del="handleRowDelete"></avue-crud>
</template>

<script>
export default {
  name: 'tableColumn',
  props: {
    formData: {
      type: Array,
      default: () => []
    },
    isViewStatus: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    isViewStatus: {
      handler(val) {
        this.$set(this.option, 'addRowBtn', !val);
        this.$set(this.option, 'menu', !val);
        this.$set(this.option, 'editBtn', !val);
      },
      immediate: true
    }
  },
  data() {
    return {
      data: this._cloneDeep(this.formData),
      option: {
        border: true,
        addBtn: false,
        cellBtn: true,
        addRowBtn: true,
        viewBtn: false,
        editBtn: false,
        delBtn: true,
        index: true,
        menu: true,
        columnBtn: false,
        refreshBtn: false,
        indexLabel: '序号',
        column: [
          {
            label: '字段',
            cell: true,
            prop: 'field',
            minWidth: 150
          },
          {
            label: '显示名称',
            prop: 'headerName',
            cell: true,
            minWidth: 150
          },
          {
            label: '序号',
            cell: true,
            prop: 'sequence',
            minWidth: 150
          },
          {
            label: '父级字段名',
            cell: true,
            prop: 'parentsField',
            minWidth: 150
          },
          {
            label: '列宽',
            cell: true,
            prop: '  minWidth',
            minWidth: 150
          },
          {
            label: '是否固定列',
            cell: true,
            prop: 'pinned',
            span: 7,
            type: 'select',
            value: false,
            dicData: [
              {
                label: '是',
                value: true
              },
              {
                label: '否',
                value: false
              }
            ],
            minWidth: 150
          },
          {
            label: '类型',
            cell: true,
            prop: 'type',
            minWidth: 150,
            value: 'text'
          },
          {
            label: '导出字段映射',
            cell: true,
            prop: 'exportmap',
            minWidth: 150
          },

          {
            label: '自定义模板',
            cell: true,
            prop: 'cellRenderer',
            minWidth: 150
          }
        ]
      }
    };
  },
  methods: {
    rowSave(row, done, loading) {
      this.$emit('change', this.data);
      done();
    },
    addUpdate(row, index, done, loading) {
      this.$emit('change', this.data);
      done();
    },
    handleRowDelete(row, index) {
      this.data.splice(index, 1);
      this.$emit('change', this.data);
    }
  }
};
</script>

<style scoped></style>
